<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            box-sizing:border-box;
        }
        html,body {
            margin:0;
        }
        ul {
            list-style:none;
            padding:0;
            margin:0;
        }
        a {
            text-decoration: none;
        }
        .container {
            width:452px;
            margin-top:20px;
            margin-left:20px;
            position:relative;
        }
        .pic {
            width:452px;
            height:452px;
            border:1px solid #ccc;
            position:relative;
        }
        .pic .shadow {
            width:225px;
            height:225px;
            position:absolute;
            left:0;
            top:0;
            background:#d39e00;
            opacity:0.5;
            cursor: move;
            display:none;
        }
        .spic {
            width:452px;
            height:56px;
            margin-top:10px;
            position:relative;
        }
        .spic .flow {
            width:380px;
            height:56px;
            margin:0 auto;
            position:relative;
            overflow:hidden;
        }
        .spic .spicList {
            font-size:0;
            width:532px;
            position:absolute;
            left:0;
            top:0;
        }
        .spic .spicList:after {
            content:'';
            clear:both;
            display:block;
        }
        .active {
            border:1px solid red!important;
        }
        .spic .spicList li {
            float:left;
            line-height:1;
            margin:0 10px;
            border:1px solid white;
        }
        .spic .left {
            color:#aaa;
            font-size:20px;
            position:absolute;
            top:20%;
            left:0;
        }
        .spic .right {
            position:absolute;
            top:20%;
            right:0;
            color:#aaa;
            font-size:20px;
        }
        .bpic {
            width:540px;
            height:540px;
            border:1px solid #ccc;
            overflow:hidden;
            position:absolute;
            left:460px;
            top:0;
            display:none;
        }
        .bpic img {
            position:absolute;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="pic">
        <img src="img/1xx.jpg">
        <div class="shadow"></div>
    </div>
    <div class="spic">
        <a class="left" href="javascript:void(0)"> < </a>
        <a class="right" href="javascript:void(0)"> > </a>
        <div class="flow">
            <ul class="spicList">
                <li class="active">
                    <img src="img/1x.jpg">
                </li>
                <li>
                    <img src="img/2x.jpg">
                </li>
                <li>
                    <img src="img/3x.jpg">
                </li>
                <li>
                    <img src="img/4x.jpg">
                </li>
                <li>
                    <img src="img/5x.jpg">
                </li>
                <li>
                    <img src="img/6x.jpg">
                </li>
                <li>
                    <img src="img/7x.jpg">
                </li>
            </ul>
        </div>
    </div>
    <div class="bpic">
        <img src="img/1xxx.jpg">
    </div>
</div>
</body>
</html>
<script>
    window.onload = function(){
        var leftBtn = document.querySelector('.left');
        var rightBtn = document.querySelector('.right');
        var picLi = document.querySelectorAll('.spicList li');
        var picUl = document.querySelector('.spicList');
        //向右移动的按钮
        var length = picLi.length;
        var picImg = document.querySelector('.pic img');
        var pic = document.querySelector('.pic');
        var bpic = document.querySelector('.bpic');
        var shadow = document.querySelector('.shadow');
        var bpicImg = document.querySelector('.bpic img');
        leftBtn.onclick = function(){
            //console.log(picUl.offsetLeft);
            var currentLeft = parseInt(getComputedStyle(picUl)['left']);
            if(currentLeft < 0){
                picUl.style.left = (currentLeft + 76) + 'px';
            }
        }
        //向左移动的按钮
        rightBtn.onclick = function(){
            var currentLeft = parseInt(getComputedStyle(picUl)['left']);
            if(currentLeft > -152){
                picUl.style.left = (currentLeft - 76) + 'px';
            }
        }
        //鼠标切换不同的图片
        for(var i=0;i<length;i++){
            picLi[i].onmouseover = function(){
                for(var j=0;j<length;j++){
                    picLi[j].className = '';
                }
                this.className = 'active';
                //当前li下面的图片
                var currentImg = this.children[0];
                var imgSrc= currentImg.getAttribute('src');
                picImg.src = imgSrc.replace(/x/g,'xx');
                bpicImg.src = imgSrc.replace(/x/g,'xxx');
            }
        }
        //鼠标放到图片上的时候，让大图显示
        pic.onmouseover = function(event){
            shadow.style.display = 'block';
            bpic.style.display = 'block';
            var left = parseInt(event.clientX - 21 - (shadow.offsetWidth/2));
            var top = parseInt(event.clientY - 21 - (shadow.offsetHeight/2));
            shadow.style.left = left + 'px';
            shadow.style.top = top + 'px';
            pic.onmousemove = function(event){
                var left = parseInt(event.clientX - 21 - (shadow.offsetWidth/2));
                var top = parseInt(event.clientY - 21 - (shadow.offsetHeight/2));
                if(left < 0){
                    left = 0;
                }
                if(top < 0){
                    top = 0;
                }
                if(left > pic.clientWidth - shadow.offsetWidth){
                    left = pic.clientWidth - shadow.offsetWidth
                }
                if(top > pic.clientHeight - shadow.offsetHeight){
                    top = pic.clientHeight - shadow.offsetHeight;
                }
                shadow.style.left = left + 'px';
                shadow.style.top = top  + 'px';
                //让大图跟随left,top来进行移动
                var scaleLeft = left / picImg.offsetWidth;
                var scaleTop = top / picImg.offsetHeight;
                bpicImg.style.left = -(scaleLeft * bpicImg.offsetWidth) + 'px';
                bpicImg.style.top = -(scaleTop * bpicImg.offsetHeight) + 'px';
            }
        }
        //鼠标移出的时候，让所有的东西消失
        pic.onmouseout = function(){
            shadow.style.display = 'none';
            bpic.style.display = 'none';
        }
    }
</script>